<template>
	<view class="my">
		<view class="nav-header-box">
			<view class="header-left">
				<view class="header-left-icon"></view>
			</view>
			<view class="header-title">
				<view class="header-p">我的</view>
			</view>
			<view class="header-right" @click="goLogin">
				<view class="header-right-icon"></view>
			</view>
		</view>

		<view class="user-info-box">
			<view class="user-info-top">
				<view class="user-img-box" @click="goSetting">
					<image :src="user_avators" mode=""></image>
				</view>
				<view class="user-right">
					<view class="user-followers" @click="goFollow(1)">
						<view class="followers-num">{{follwercount}}</view>
						<view class="followers-text">关注</view>
					</view>
					<view class="user-following" @click="goFollow(0)">
						<view class="following-num">{{fanscount}}</view>
						<view class="following-text">粉丝</view>
					</view>
					<view class="user-news">
						<view class="news-num">0</view>
						<view class="news-text">发布</view>
					</view>
				</view>
			</view>
			<view class="user-info-bottom">
				<view class="user-info-name">
					<view class="user-name">{{user_nick_name}}</view>
				</view>
				<view class="user-info-signature">
					<view class="user-signature">{{user_message!="null"?user_message:'编辑个性，展示我的独特态度。'}}</view>
				</view>
			</view>
		</view>

		<view class="my-list-box">
			<view class="nav-ul-list">
				<view class="nav-li-content" @click="handoff(0)">
					<view class="nav-title">浏览记录</view>
					<text class="underline" :class="navIndex==0?'active':''"></text>
				</view>
				<view class="nav-li-content" @click="handoff(1)">
					<view class="nav-title">发布</view>
					<text class="underline" :class="navIndex==1?'active':''"></text>
				</view>
			</view>
		</view>
		<view class="section-box">
			<view class="section-list">
				<view class="ul-list">
					<scroll-view scroll-y="true" class="scroll-view-height">
						<view v-if="lookList.length==0">
							<view class="look-null">
								暂时无更多浏览记录
							</view>
						</view>
						<view else>
							<block v-for="item in lookList" :key="'l' + item.id">
								<view class="li-list" @touchstart.stop.prevent="getClickTime" @touchend.stop.prevent="goDetail(item.news_id)">
									<view class="big-detele" @touchstart.stop="deteliLook(item.user_id,item.news_id)">
										<view v-show="isShow" class="detele-look" ></view>
									</view>
									<view class="left-img">
										<image v-if="/.*thepaper.*/gi.test(item.news_img)"
											:src="`https://images.weserv.nl/?url=${item.news_img}`" mode="aspectFill">
										</image>
										<image v-else :src="`${item.news_img}`" mode="aspectFill"></image>
									</view>
									<view class="content-writing">
										<view class="p-location">{{item.news_tag}}</view>
										<view class="p-title">{{item.news_title}}</view>
										<view class="p-come">
											<view class="p-come-left">
												<view class="p-person">
													<text class="person-icon">
														<image :src="item.user_avators" mode="aspectFill"></image>
													</text>
													<text class="person">{{item.news_media}}</text>
												</view>
												<view class="p-time">{{item.news_time}}</view>
											</view>
											<view class="p-come-right">
												<!-- <text class="come-right-icon"></text> -->
											</view>
										</view>
									</view>
								</view>
							</block>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		follwerCount,
		fansCount,
		removeLook,
		getLook,
		getUser,
	} from "@/api/request";
	export default {
		data() {
			return {
				navIndex: 0,
				user_avators: "../../static/logo.png",
				user_nick_name: "",
				user_id: "",
				user_message: "",
				follwercount: 0,
				fanscount: 0,
				lookList: [],
				startTime: 0,
				endTime: 0,
				isShow:false
			}
		},
		methods: {
			deteliLook(user_id,news_id){
				// console.log(item);
				this.isShow=true
				let data = {
					user_id,
					news_id
				};
				removeLook(data).then(content=>{
					console.log(content);
					if(content.code==200){
						uni.showToast({
							title:"删除成功",
							icon:"none"
						})
						this.getMyLook();
					}
				})
			},
			getClickTime() {
				this.startTime = Date.now();
				if(this.isShow==true){
					// this.isShow = false;
					// return
				}
				// console.log("start111", this.startTime);
			},
			goFollow(id) {
				uni.navigateTo({
					url: "/pages/follow/follow?type=" + id
				})
			},
			goLogin() {
				uni.navigateTo({
					url: "/pages/login/login"
				})
			},
			getUserInfo() {
				let data = {
					user_id: this.user_id
				};
				getUser(data).then(content => {
					// console.log(content);
					let {
						code,
						data
					} = content
					if (code == 200) {
						this.userInfo = data[0]
						this.username = data[0].user_nick_name == null ? '' : data[0].user_nick_name
						this.useremail = data[0].user_email == null ? '' : data[0].user_email;
						this.userphone = data[0].user_phone == null ? '' : data[0].user_phone;
						this.usermassage = data[0].user_message == null ? '' : data[0].user_message;
						console.log(this.user_message);
						// console.log(this.userInfo); 
					}
				})
			},
			//去设置
			goSetting() {
				uni.navigateTo({
					url: "/pages/setting/setting"
				})
			},
			//去详情页
			goDetail(id) {
				let endTime = Date.now();
				// console.log("end222", endTime);
				// console.log(id);
				if(this.isShow==true){
					this.isShow = false;
					return
				}
				if (endTime - this.startTime < 500) {
					uni.navigateTo({
						url: "/pages/detail/detail?id=" + id
					})
				}else{
					this.isShow = true
				}
			},
			handoff(index) {
				this.navIndex = index
			},
			getMyLook() {
				let data = {
					user_id: this.user_id
				}
				getLook(data).then(content => {
					// console.log(content);
					let {
						code,
						data
					} = content
					if (code == 200) {
						this.lookList = data
					}
				}).catch(err => {
					console.log(err);
				})
			},
			getFollwerCount() {
				let data = {
					user_id: this.user_id
				};
				follwerCount(data).then(content => {
					// console.log("1111",content);
					let {
						code,
						data
					} = content
					if (code == 200) {
						this.follwercount = data[0]["COUNT(*)"]
					}
				}).catch(err => {
					console.log("1112", err);
				})
			},
			getFansCount() {
				let data = {
					follow_user: this.user_id,
				};
				fansCount(data).then(content => {
					// console.log("2222",content);
					let {
						code,
						data
					} = content
					if (code == 200) {
						this.fanscount = data[0]["COUNT(*)"]
					}
				}).catch(err => {
					console.log("2221", err);
				})
			}
		},
		onShow() {
			this.user_avators = localStorage.getItem("user_avators");
			this.user_nick_name = localStorage.getItem("user_nick_name");
			this.user_id = localStorage.getItem("user_id");
			this.user_message = localStorage.getItem("user_message");
			this.getFollwerCount();
			this.getFansCount();
			this.getMyLook();
		},
		created() {
			// this.getUserInfo()

		}
	}
</script>

<style lang="scss" scoped>
	.my {
		width: 100%;
		padding: 0 $uni-box-padding;

		.nav-header-box {
			// border: 1px solid #000;
			padding: 30rpx 0;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			// height: 48rpx;

			.header-title {
				font-size: 32rpx;
				font-weight: bold;

			}

			.header-left,
			.header-right {
				width: 48rpx;
				height: 48rpx;
				background-repeat: no-repeat;
				background-size: 100%;
			}

			.header-left {
				background-color: #fff;
			}

			.header-right {
				background-image: url("@/static/image/setup.png");
			}
		}

		.user-info-box {
			width: 100%;

			.user-info-top {
				width: 100%;
				display: flex;

				.user-img-box {
					width: 200rpx;
					height: 200rpx;

					image {
						border-radius: 50%;
						width: 100%;
						height: 100%;
					}
				}

				.user-right {
					width: calc(100% - 200rpx);
					padding-left: 20rpx;
					display: flex;
					align-items: center;
					// justify-content: space-between;
				}

				.user-followers,
				.user-following,
				.user-news {
					text-align: center;
					width: 33.33%;
					padding: 0 20rpx;

					.followers-num,
					.following-num,
					.news-num {
						font-size: 30rpx;
						color: #000;
						font-weight: bold;
					}

					.followers-text,
					.following-text,
					.news-text {
						padding-top: 10rpx;
						font-size: 30rpx;
					}
				}
			}

			.user-info-bottom {
				padding: 10rpx 0;
				width: 100%;

				.user-info-name {
					padding-bottom: 10rpx;
					font-size: 32rpx;
					color: #000;
					font-weight: bold;

					.user-name {
						width: 200rpx;
						text-align: center;
					}
				}

				.user-info-signature {
					// border: 1px solid #000;
					height: 96rpx;
					font-size: 28rpx;
					color: #4E4B66;
				}
			}
		}

		.nav-ul-list {
			padding: 30rpx 0;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;

			.nav-li-content {
				padding: 0 30rpx;

				.nav-title {
					font-size: 32rpx;
					color: #4E4B66;
					padding-bottom: 10rpx;
				}

				.underline {
					margin: 0 auto;
					display: block;
					width: 20rpx;
					height: 4rpx;
					background-color: transparent;
					transition: width 0.3s;

					&.active {
						width: 60rpx;
						background-color: #1877F2;
					}
				}
			}


		}

		.section-box {
			width: 100%;

			.section-content {
				width: 100%;
				padding: 32rpx;
			}

			.content-img-box {
				padding: 10rpx;
				width: 100%;
				height: 366rpx;

				image {
					border-radius: 10rpx;
					width: 100%;
					height: 100%;
				}
			}

			.content-writing {
				width: 100%;

				.p-location {
					font-size: 28rpx;
					color: $uni-text-color-grey;
				}

				.p-title {
					padding: 15rpx 0 10rpx 0;
					font-size: 32rpx;
					color: #000;
				}

				.p-come {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
				}

				.p-come-left {
					display: flex;
					align-items: flex-end;
				}

				.p-person {
					display: flex;
					align-items: center;
					margin-right: 20rpx;
				}


				.person-icon {
					display: block;
					width: 40rpx;
					height: 40rpx;
					border-radius: 50%;
					margin-right: 5rpx;

					image {
						border-radius: 50%;
						border: 1px solid #f0f0f0;
						width: 100%;
						height: 100%;
					}
				}

				.person {
					padding-left: 5rpx;
					font-size: 28rpx;
					color: #4e4b46;
					font-weight: bold;
				}

				.p-time {
					padding-left: 5rpx;
					font-size: 24rpx;
					color: $uni-text-color-grey;
				}

				.p-come-right {
					width: 40rpx;
					height: 40rpx;
					background-image: url("@/static/image/more.png");
					background-repeat: no-repeat;
					background-size: 100%;
				}
			}
		}

		.section-list {
			// border: 1px solid #000;
			// margin-top: 30rpx;
			width: 100%;
			// height: 500rpx;

			.scroll-view-height {
				height: calc(100vh - 700rpx);
			}

			.look-null {
				padding: 30rpx 0;
				text-align: center;
				font-size: 32rpx;
				color: #999;
			}

			.li-list {
				position: relative;
				display: flex;
				align-items: center;
				margin-bottom: 30rpx;
				
				.detele-look{
					z-index: 999;
					position: absolute;
					top: 0;
					right: 0;
					// background-color: #000;
					background-image: url("@/static/image/detele.png");
					background-repeat: no-repeat;
					background-size: 100%;
					width: 40rpx;
					height: 40rpx;
				}

				.left-img {
					width: 192rpx;
					height: 192rpx;

					image {
						border-radius: 10rpx;
						width: 100%;
						height: 100%;
					}
				}

				.content-writing {
					flex: 1;
					padding: 0 10rpx;

					.p-title {

						height: 106rpx;
						overflow: hidden;
						// text-overflow: ellipsis;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						display: -webkit-box;
					}
				}
			}
		}

	}
</style>